<template>
  <q-card-section class="row justify-center">
    <q-form
      class="col-12 col-lg-11 col-xl-9"
      @submit.prevent.stop="editItem"
      ref="editItem"
    >
      <div class="row q-col-gutter-md">
        <div class="col col-md-4">
          <q-select
            outlined
            dense
            v-model="Select.model"
            :options="Select.options"
            label="所属分类"
            clear-icon="mdi-close"
            clearable
            options-selected-class="text-primary"
            name="CategoryID"
          />
        </div>
        <div class="col col-md-8">
          <q-input
            outlined
            dense
            v-model="DocName"
            label="文件显示名称"
            name="DocName"
            :rules="[val => !!val || '请填写文件显示名称']"
          />
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col col-md-6">
          <q-uploader
            ref="DocLink"
            flat
            bordered
            label="上传文件"
            accept="application/vnd.ms-excel, application/vnd.ms-works, application/vnd.ms-powerpoint, application/pdf, application/msword,  application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            max-files="1"
            auto-upload
            class="full-width"
            :factory="uploadFile"
            @uploaded="uploadedInfo"
          />
          <q-input
            class="hidden"
            outlined
            dense
            v-model="DocLink"
            label="文件地址"
            name="DocLink"
          />
        </div>
        <div class="col col-md-6">
          <h6 class="q-ma-none q-mb-md">已上传文件</h6>
          <div>
            <p class="q-ma-none">
              <a
                :href="$utils.defaultImgSrc + DocLink"
                target="_blank"
              >
                <q-icon
                  :name="'mdi-file-' + $utils.buildDocIcon(DocLink)"
                  class="mdi-24px"
                />
                {{ DocName }}
              </a>
            </p>
            <p class="text-blue-grey-3 ">{{ DocLink }}</p>
          </div>
          <p>
            可上传文件类型为：Word、PPT、Excel、Pdf、WPS格式的文件，支持扩展名为 <span class="text-primary">.doc/.docx/.xls/.xlsx/.ppt/.pptx/.pdf/.wps</span> 的文件。
          </p>
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col col-md-6">
          <q-toggle
            v-model="Status"
            name="Status"
            label="是否审核"
            left-label
            class="q-ml-sm"
          />
          <div class="q-field__bottom q-field__messages col">取消审核的文档，不会删除，只是不在前台显示</div>
        </div>
      </div>
      <q-separator class="q-my-md" />
      <div class="row q-col-gutter-md">
        <q-space />
        <div class="col col-md-2">
          <q-btn
            label="提交编辑"
            type="submit"
            color="primary"
            unelevated
            class="full-width"
          />
        </div>
        <div class="col col-md-2">
          <q-btn
            label="返回列表"
            type="button"
            color="info"
            unelevated
            class="full-width"
            @click="returnList"
          />
        </div>
      </div>
    </q-form>
  </q-card-section>
</template>

<script>
import { mapMutations } from 'vuex'

// 定义获取二级分类的参数
const _mCode = {
  mCode: 'scxz'
}

export default {
  name: 'PageEditFile',
  components: {},
  props: {},
  data () {
    return {
      // ---------- 下拉框
      Select: {
        model: null,
        options: [],
        columnName: '',
      },
      DocName: '',
      DocLink: '',
      Status: true,
    }
  },
  methods: {
    // 获取传递过来的ID参数
    getParamsID() {
      this.ID = this.$route.params.ID
      if ( this.ID === ':ID') {
        this.$utils.notify('参数错误', 'red-8')
        this.$utils.returnPrevPage()
      }
      // console.log(this.ID)
    },
    // 获取所属分类
    getCategory() {
      this.$api.MColumnOptionParams('GetMColumnList', 'get', _mCode).then (result => {
        // console.log(result)
        this.Select.options = result
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })
    },
    // 根据ID获取数据
    getItem(url) {
      this.$api.UpDownParams(url, 'get').then (result => {
        // console.log(result)
        this.Select.model = new Object()
        this.Select.model.value = result.CategoryID
        const _CategoryID = result.CategoryID
        this.Select.options.forEach((item, index) => {
          if ( item.value === _CategoryID ) {
            this.Select.model.label = item.label
          }
        })
        this.DocName = result.DocName
        this.DocLink = result.DocLink,
        this.Status = result.Status
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })

    },
    // 上传文件
    uploadFile(files) {
      return this.$utils.uploadedFile()
    },
    // 提取文件地址
    uploadedInfo(info) {
      this.DocLink = this.$utils.formatUploadedInfo(info)[0]
      // console.log(this.DocLink)
    },
    // 修改
    editItem(evt) {
      if ( this.Select.model === null ) {
        this.$utils.notify('请选择文件分类', 'red-8')
      } else {
        const _editItemResult = this.$utils.formatFormData(evt)
        // console.log(_editItemResult)
        this.$api.UpDownData(this.ID, 'put', _editItemResult).then( result => {
          // console.log(result)
          if ( result === 'success') {
            //  重新请求数据列表
            this.getItem(this.ID)
            this.$refs.DocLink.reset()
            this.$utils.notify('更新成功！', 'positive')
          } else if ( result === 'error' ) {
            this.$utils.notify('数据库操作错误，请联系管理员', 'red-8')
          } else {
            this.$utils.notify(result, 'red-8')
          }
        }).catch( err => {
          switch (err.response.status) {
            case 401:
              this.unauthorized()
              break
          }
          console.log(err)
        })
      }
    },
    // btn-返回列表
    returnList() {
      this.$router.push('/UpDowns/Files');
    },
    // session过期操作
    ...mapMutations(['changeLogin']),
    unauthorized() {
      // 弹出警告框
      this.$utils.notify('身份信息过期','red-8')
      // 清除vuex中的token
      this.changeLogin({ Authorization: '' })
      // 路由跳转
      this.$router.push('/Login', onComplete => {}, onAbort => {});
    }
  },
  mounted() {
    this.getCategory()
    this.getItem(this.ID)
  },
  created() {
    this.getParamsID()
  }
}
</script>
<style scoped>
</style>